
<template>
  <div>
    <div class="app-container">
      <h-table-list
        border
        :show-header="false"
        type="local"
        :page-sizes="[10,20]"
        :data="deal_message.messageList"
        @size-change="handleSizeChange"
        :columns="columns"
        :paginationInfo="paginationInfo"
        :form-options="formOptions"
      >
      <el-button @click="readAll" type="primary">全部已读</el-button>
       <el-button @click="removeAll" type="primary" >清空消息</el-button>
       <template slot="operate-column" slot-scope="scope">
           <div> <div :class="!scope.row.status?'circle-12':''" /><span>{{scope.row.createdTime |formatDate}}</span></div>
          <div>{{scope.row.title}}</div>
           <div>{{scope.row.message}}</div>
         <div><el-button type="text" @click="()=>detail(scope.row)">查看详情</el-button>
         <el-button type="text" @click="()=>deleteMessage(scope.row)">删除消息</el-button>
         </div>
           
       </template>
       
      </h-table-list>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import waves from "@/directive/waves"; // waves directive
import DownloadIdentify from "@/components/FormDialog";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import ListOpearteButton from "@/components/AllButton/button2";
import tableButton from "@/components/AllButton/button3";
import data from "./const";
import { parseTime,listTotree } from "@/utils";
const weekObj={1:'星期日',2:'星期一',3:'星期二',4:'星期三',5:'星期四',6:'星期五',7:'星期六'}
export default {
  name: "deal_message",
  components: {
    DownloadIdentify,
    Pagination,
    tableButton,
    ListOpearteButton,
  },
  directives: { waves },
  filters: {
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    },
  },
  data() {
    return {
      time:[
         [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
      ],
    //  timeString: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      dialogFormVisible:false,
      loadList: false,
      showPwd:false,
       ruleForm: {
          users: [],
          scheduleName: '',
        },
        
          
      paginationInfo: {
        sizeChange: (e) => {
          console.log(e);
        },
        currentChange: (e) => {
        
          this.getList({ current: e,});
        },
        current: 1,
        total: 10 ,
      },
      formOptions: {
        inline: true,
        submitBtnText: "搜索",
        showResetBtn:false,
        showSearchBtn:false,
        searchParamsHandler: () => {
          console.log("搜索");
      
        },
        changevalue: (params) => {
     
          console.log(params);
          this.$store.dispatch("deal_message/setListSearchParams", params);
        },
        resetBtnCallback: () => {
          this.$store.dispatch("deal_message/setListSearchParams", {});
          this.getList(this.$store.state.deal_message.listSearchParams);
        },
       forms: [
        ],
      },
       columns: [
        
        {
          prop: "operate",
          label: "操作",
          minWidth:'100%',
         // minWidth: 180,
          slotName: "operate-column",
          //fixed: "right",
        },
      ],
     
      dateData:[{weekType:weekObj[1]},{weekType:weekObj[2]},{weekType:weekObj[3]},{weekType:weekObj[4]},{weekType:weekObj[5]},{weekType:weekObj[6]},{weekType:weekObj[7]}],  
      tableData: [],
    };
  },

  watch: {
    formChange: () => {},
  },
  computed: {
    ...mapState(["deal_message","app"]),
  },
  created() {
      this.getList()
  },
  methods: {
    async getList(){
      await this.$store.dispatch("deal_message/requestMessageList")
      this.$set(this.paginationInfo,"total",this.$store.state.deal_message.messageTotal)
    },
    async readAll(){
     this.$store.dispatch("deal_message/readAllMessage").then(res=>{
      this.getList()
     }
      
     )
    },
    async removeAll(){
     this.$store.dispatch("deal_message/removeAllMessage").then(res=>{
        this.getList()
     })
    },
      cancel(){
      this.dialogFormVisible=false
    },
    deleteMessage(row) {
      console.log(row);
      this.$confirm(
        `该账号删除后不可恢复，确认删除？请先确保：

1.该账号无审批任务

2.该账号不在任一审批配置中`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$store.dispatch("deal_message/deleteDeviceInfo",row.id).then(response=>{
           this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
          }).catch(()=>{ 
            this.$message({
            type: "info",
            message: "删除失败",
          })})
         
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  
    detail(row) {
      console.log(row);
if(row){
        localStorage.setItem(row.webJumpUrl, row.id);
        this.$router.push(row.webJumpUrl);
      }
    },
   
  },
};
</script>

